import React, { useState } from 'react';
import c from './index.module.scss'
import { Button, Form, Input,InputNumber } from 'antd';
import { useLocation } from 'react-router-dom';
import axios from "axios"
import QuillEditor from "./Quill"

// 提示框
// notification.config({
//   placement: "bottomRight",
//   // bottom: 280,
//   // top: "10",
//   bottom: 550,
//   duration: 1,
// });
// // const [type, setType] = useState({})
// const openNotificationWithIcon = (type) => {
//   notification[type]({
//     message: 'Notification Title',
//     description:
//       'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
//   });
// };

// 表单
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const validateMessages = {
  required: '${label} 是必填的!',
};


export default function Home() {

  // 接受路由参数
  let location=useLocation()
  console.log(location.search,777);
  if(location.search){
    let arr=location.search.split("?")
    var arr1=arr[1].split("=")
    console.log(arr1);
  }
 
 
  // 提交的表单的信息
  var fdata = new FormData();
  const onFinish = (values) => {

    // 获取富文本信息
    const infoTxt = document.getElementById('quill-editor').children[0].innerHTML;
    console.log(infoTxt, 9);

    fdata.append("chapterName", values.chapter.chapterName);
    fdata.append("chapterText", infoTxt);
    fdata.append("zhangjie", values.chapter.zhangjie);
    fdata.append("bookID", arr1[1]);

    // avatar
    // fdata.append("cover", values.book.cover.file); 
    axios.post("/bupdata", fdata).then(
      response => { console.log('成功了', response.data); },
      error => { console.log('失败了', error); })
      
  };




  const formItemLayout = {
    labelCol: {
      xs: { span: 24 }, // * <576p
      sm: { span: 4 }, // * ≥576px
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
};

  return (
    <div className={c['zong']}>
      <h2>章节更新</h2>
      <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}   gutter={24} {...formItemLayout}>

        {/* 章节名字 */}
        <Form.Item
          name={['chapter', 'chapterName']}
          label="章节名字"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
{/* 第几章 */}
        <Form.Item 
        name={['chapter', 'zhangjie']} 
        label="第几章" 
        rules={[{ type: 'number', min: 1, max: 10000 }, {
          required: true,
        }]} >
        <InputNumber />
      </Form.Item>
        {/* 章节内容 */}
        <Form.Item
          name={['chapter', 'chapterText']}
          label="章节内容"
          className={c['text']}
         
        >
          <QuillEditor />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" className={c['btn']}
          // onClick={() => openNotificationWithIcon('success')}
          >
            提交
          </Button>
        </Form.Item>
      </Form>


    </div>

  )
}

